<template>
  <div id="allotGoods">
    <!--条件查询-->
    <el-form :inline="true" :model="searchObj" ref="SupplierList" class="demo-form-inline">
      <el-form-item label="商户名称">
        <el-input v-model="searchObj.shopName" placeholder="请输入商户名称"></el-input>
      </el-form-item>

      <el-form-item label="下单时间">
        <el-date-picker
            v-model="timeValue"
            type="datetimerange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['23:00:00', '23:00:00']"
            value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryBtn">查询</el-button>
        <el-button @click="">
          <i class="el-icon-refresh-right"></i>
          重置
        </el-button>
      </el-form-item>
    </el-form>


    <el-button type="primary" class="el-icon-edit-outline" @click="outStorageMake" plain> 生成出库单</el-button>


    <!--数据表格-->
    <div  v-if="tableData.length > 0">
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="shopName"
          label="商户名称">
      </el-table-column>
      <el-table-column
          label="门店图片">
        <template slot-scope="scope">
          <el-avatar :size="45" shape="square" :src="scope.row.shopImg" @error="errorHandler">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
          </el-avatar>
        </template>
      </el-table-column>
      <el-table-column
          prop="address"
          label="门店地址">
      </el-table-column>
      <el-table-column
          prop="orderAmount"
          label="订单数量">
      </el-table-column>
      <el-table-column
          prop="goodsPrice"
          label="商品总价">
      </el-table-column>
      <el-table-column
          prop="goodsAmount"
          label="商品总数">
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizeList"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    </div>


    <el-empty v-if="tableData.length === 0" description="主人，请点击查询订单喔~~~" :image-size="300" image="
http://localhost:10001/images/Goods/545660e1-889c-46fe-9783-3fcf7a5251f1.jpg"></el-empty>
  </div>
</template>

<script>
export default {
  name: "AllotGoods",
  data() {
    return {
      searchObj: {},
      timeValue:[],
      multipleSelection:[],

      // 当前页号
      currentPage: 1,
      // 当前页大小
      pageSize: 5,
      // 总记录数
      total: 10,
      // 页大小列表
      pageSizeList: [2, 5, 10, 20],
      // 返回数据对象
      tableData: [],
    }
  },
  methods: {
    //生成出库单
    outStorageMake(){
      if (this.multipleSelection.length ===0 )
        return this.$message.warning("请先选择要生成出库单的商户的订单！")

      this.$router.push({ path: '/outStorageMake', query: { id: this.multipleSelection,orderCreateTime:this.timeValue }   })
    },

    //查询
    async queryBtn() {
      this.searchObj.createTime = this.timeValue;
      const  { data: res } = await this.$http.post(`/orderInfo/getOrderByMid/${this.currentPage}/${this.pageSize}`,this.searchObj);
      this.tableData = res.rows;
      this.total = res.total;
    },
    //批量选择
    handleSelectionChange(val) {
      let ary=[];
      for(let i=0; i<val.length; i++) {
        ary.push(val[i].merchantId);
      }
      this.multipleSelection = ary
      console.log('商户id',this.multipleSelection)
    },
    //头像展示失败
    errorHandler() {
      return true
    },

    //页大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.queryBtn()
    },
    //当前页改变
    handleCurrentChange(val){
      this.currentPage = val
      this.queryBtn()
    },

  },
  created() {

    //默认时间
    this.timeValue = [
      // 计算前一天的日期，并设置为23:00:00
      new Date(new Date().setDate(new Date().getDate() - 1)).setHours(23, 0, 0, 0),
      // 计算今天的日期，并设置为23:00:00
      new Date(new Date()).setHours(23, 0, 0, 0)
    ].map(time => new Date(time)) // 将毫秒时间戳转换为日期对象


  }
}
</script>

<style scoped>

</style>